<template>
	<view class="location-wrapper">
		<u-sticky offset-top="0">
			<view class="top-location-serach-wrapper flex-c-s">
				<view class="select-address flex-c" @click="searchAddress">
					<uni-icons type="location" size="18"></uni-icons>
					<text class="fz26 text-flemp1">{{ currentAddress }}</text>
					<uni-icons type="bottom" size="14" color="#666"></uni-icons>
				</view>
				<view class="search-address">  
						<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" placeholder="输入地址名称搜索"
						@input="input" cancelButton="none" @cancel="cancel" @clear="clear" radius="30">
						</uni-search-bar> 
				</view>
			</view>
		</u-sticky>
		<view class="again-location flex-c-s b-b-1">
			<text class="fz26" @click="selectorLocation">{{ currentAddress }}</text>
			<view class="flex-c">
				<image src="/static/images/location.png" style="width: 34rpx; height: 34rpx;" mode=""></image>
				<text class="color-theme fz26">重新定位</text>
			</view>
		</view>
		<view class="search-result-list" v-show="resultList.length">
			<view class="result-item flex-c-s b-b-1" v-for="l of resultList" :key="l.description">
				<view class="">
					<view class="address-name fz28">
						{{l.name}}
					</view>
					<view class="address-location color666 fz24">
						{{l.description}}
					</view>
				</view>
				<text class="color999 fz26">{{l.distance}} Km</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, } from 'vue'
import { onLoad, } from '@dcloudio/uni-app'
import { getLocationInfo } from '@/utils/tools'

export default defineComponent({
	setup() {
		const state = reactive({
			currentAddress: '重新定位',
			searchValue: '',
			resultList: [
				{ name: '西安市仿古街', description: '西安市未央区未央路65号', distance: 85},
				{ name: '大雁塔音乐喷泉', description: '西安市雁塔区雁南路', distance: 78},
			]
		})
		
		onLoad(async () => {
			let res = await getLocationInfo()
			if(res.code === 1) {
				state.currentAddress = res.data.district
			} else {
				state.currentAddress = '重新定位'
			} 
		})
		
		const search = () => {
			
		}
		
		const clear = () => {
			
		}
		
		const cancel = () => {
			
		}
		const input = () => {
			
		} 
		const searchAddress = () => {
			uni.navigateTo({
				url: '/pages/indexPackge/location/searchAddress',
				success() {
					uni.$once('addeventListenerLocation1', (res) => {
						state.currentAddress = res.name || '重新定位' 
					})
				}
			})
		}
		
		const selectorLocation = () => {
			uni.$emit('addeventListenerLocation', state.currentAddress) 
			uni.navigateBack()
		}
		return {
			search,
			clear,
			cancel,
			input,
			selectorLocation,
			searchAddress,
			...toRefs(state)
		}
	}
})
</script>

<style>page{ background-color: #f8f8fa;}</style>

<style lang="scss" scoped>
.location-wrapper{
	.top-location-serach-wrapper{
		background-color: #fff;
		.select-address{
			width: 160rpx;
			margin-left: 24rpx;
		}
		.search-address{
			flex: 1;
		}
	}
	.search-result-list{
		background-color: #fff;
		padding: 24rpx;
		.result-item{
			padding: 20rpx 0;
		}
	}
	.again-location{
		background-color: #fff;
		padding: 24rpx;
	}
}
</style>